<template>
  <div class="manyCustomers">
    <div class="myChart">
      <span class="noData" v-if="!noData">暂无数据！</span>
      <div class="myCharts" id="myChart" v-if="noData">
    </div>
    
    </div>
    <div class="trend" v-if="noData">
      <div class="whole">
        <span @click="whole" :class="{'active': !isWhole }">全部</span>
      </div>
      <div class="select">
       <Multiselect
            v-model="selectName"
            :options="proName"
            placeholder="请选择项目"
            :searchable="false"
            @input="selectpro"
            :allow-empty="false"
            :show-labels="false"
            track-by="name"
            label="name"
          >
            <template slot="singleLabel" slot-scope="{ option }">{{ option.name}}</template>
        </Multiselect>
      </div>
      <div class="trendChart" id="trendChart"></div>
    </div>
    
		<div class="hotChart" id="hotChart" v-if= "hotDatas"></div>
  </div>
</template>
<script>
// import Vue from "vue";
import Multiselect from "vue-multiselect";
import request from "@/utils/request";
require('echarts/extension/bmap/bmap');
// import Cookies from "js-cookie";
export default {
  data() {
    return {
      myCharts: "",
      // myChartData: {
      //   ydata: ["拾悦城", "凤凰国际公馆", "顺泽阳光", "香莎金街", "华强城"],
      //   series: [
      //     {
      //       name: "上周",
      //       type: "bar",
      //       data: [100, 300, 350, 450, 550]
      //     },
      //     {
      //       name: "本周",
      //       type: "bar",
      //       data: [120, 275, 330, 400, 534]
      //     }
      //   ]
      // },
      noData: true,
			trendChart: "",
			hotChart: '',
      hotData: {},
      hotDatas: false,
      proName:[],
      selectName: '',
      selectProject: [],
      trendObj :{},
      isWhole: false
    };
  },
  components: {
    Multiselect
  },
  watch: {
    selectName(val){
      console.log(val)
    }
  },
  methods: {
     // 选择项目下拉列表框
    selectpro: function(data) {
      this.selectProject = []
      this.isWhole = true;
      this.selectProject.push(data.name)
      this.drawTrend(this.trendObj)
    },
    //点全部
    whole(){
      this.selectName = '';
      this.proName = [];
      this.isWhole = false;
      this.drawTrend(this.trendObj)
    },
    draw(){
      request
        .get(this.global.API_URL, {
          action: "/hb/H5ReportAction/projGrowingWeek",
          requestParam: {
            // appid: Cookies.get('appid'),
            // appid: 'wxf1efeb9b9d6f6f06',
            industryid: this.$route.query.industryid?this.$route.query.industryid: 1,
            city: this.$route.query.city?this.$route.query.city: ''
          }
        })
        .then(response => {
          if (response.obj&&response.obj.growing&&response.obj.trend) {
            this.myChart = this.$echarts.init(document.getElementById("myChart"));
            this.drawLine(response.obj.growing)
            this.trendChart = this.$echarts.init(document.getElementById("trendChart"));
            this.drawTrend(response.obj.trend)
            this.trendObj = response.obj.trend
          }else{
            this.noData = false
          }
        });
    },
    
		//条形图
    drawLine(data) {
      let _self = this;
      if(!data){
          return _self.noData = false;
      }
      let dx = [];
      let dy = [];
      data.forEach(function(v, i){
        if(v.projectname.length<=5){
          dy.push(v.projectname)	
        }else{
          dy.push(v.projectname.slice(0,5)+'...');
        }
        dx.push(v.val)
        // dx.push(0)
      });
      console.log(dx)
      console.log(dy)
      let canvas = document.createElement("canvas");
      // let ctx = canvas.getContext('2d');
      canvas.width = 90;
      canvas.height = 100;
      _self.myChart.setOption({
        title: {
          text: "本周旺盘"
          // subtext: "数据来自网络"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["本周"],
          selected: {
            本周: true
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.1],
          axisLine: {
            lineStyle: {
              color: "#dbdadf",
              width: 2
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: "category",
          data: dy,
          axisLine: {
            lineStyle: {
              color: "#a8a8a8",
              width: 2
            }
          },
          axisTick: {
                alignWithLabel: true
            }
        },
        series: [
          {
            name: "本周",
            type: "bar",
            barSize: 10,
            barWidth: 10,
            itemStyle: {
              normal: {
                color: ["#ff637b"],
                barBorderRadius: 8
              }
            },
            data: dx
          }
        ]
      }, true);
		},
		
    //	趋势图
    drawTrend(data) {
     let _self = this;
      let dy = []
      let series =[]
      let list = []
      if(_self.selectName.name){
          for(let key  in data){
          // console.log(key + '---' + data[key])
          let obj={}
          dy.push(key)
          obj.name = key     
          // _self.proName.push(obj)
          if(_self.selectName.name ==key){
            series = [];
            series.push(data[key])
          }
        }
      }else{
        for(let key  in data){
          let obj={}
          //过滤没有数据的项目
          if(data[key][0].val==0&&data[key][1].val==0&&data[key][2].val==0&&data[key][3].val==0&&data[key][4].val==0&&data[key][5].val==0&&data[key][6].val==0){

          }else{
            dy.push(key)
            obj.name = key     
            _self.proName.push(obj)
            series.push(data[key])
          }
          
        }
      }
      // console.log(series)
      
      // console.log(series)
      if(_self.selectName.name){
        // alert(_self.selectName.name)
        series.forEach(function(v, i){
          list.push(
            {
              name: _self.selectName.name,
              type: "line",
              stack: "总量",
              smooth: true,
              areaStyle: {
                // color: ["#fff1f3"]
              },
              lineStyle: {
                // color: "#fff1f3"
              },
              itemStyle: {
                normal: {
                  // color: ["#ff637b"],
                  barBorderRadius: 8
                }
              },
              data: [v[0].val, v[1].val,v[2].val, v[3].val, v[4].val, v[5].val, v[6].val]
            },
          )
        })
      }else{
        series.forEach(function(v, i){
          //只过滤没有数据的项目可以去掉的
          if(v[0].val==0&&v[1].val==0&&v[2].val==0&&v[3].val==0&&v[4].val==0&&v[5].val==0&&v[6].val==0){

          }else{
          list.push(
            {
              name: dy[i],
              type: "line",
              stack: "总量",
              smooth: true,
              areaStyle: {
                // color: ["#fff1f3"]
              },
              lineStyle: {
                color: "#fff1f3"
              },
              itemStyle: {
                normal: {
                  // color: ["#ff637b"],
                  barBorderRadius: 8
                }
              },
              data: [v[0].val, v[1].val,v[2].val, v[3].val, v[4].val, v[5].val, v[6].val]
            },
          )
          }
        })
      }
      
      let canvas = document.createElement("canvas");
      // let ctx = canvas.getContext('2d');
      canvas.width = 90;
      canvas.height = 100;
      _self.trendChart.setOption({
        title: {
          text: "旺盘趋势"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        // legend: {
        //   data: dy
        // },
        toolbox: {
					//下载导出
          // feature: {
          //   saveAsImage: {}
          // }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: list
      }, true);
		},
		
    //热力图   同PC端-数据洞察-客户洞察一个echatrs
    getHotData() {
      let _self = this;
      request
        .get(_self.global.API_URL, {
          action: "/gps/GPSReportAction/getGPSListPoint",
          requestParam: {
            productid: "61",
            pageid: "",
            stime: "",
            etime: ""
          }
        })
        .then(response => {
          _self.hotData = response.obj;
          _self.hotChart = this.$echarts.init(
            document.getElementById("hotChart")
          );
          _self.drawHot();
        });
    },

    //绘制热力图
    drawHot() {
      let _self = this;
      let canvas = document.createElement("canvas");
      canvas.width = 90;
      canvas.height = 100;
      _self.hotChart.setOption({
        title: {
          text: "热点洞察",
          x: "50%",
          textAlign: "center"
        },
        animation: false,
        bmap: {
          // center: [120.13066322374, 30.240018034923],
          center: [108.1, 33.2],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              // 隐藏国道
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#00000000"
                }
              },
              //城市主干道隐藏
              {
                featureType: "arterial",
                elementType: "all",
                stylers: {
                  color: "#cfe2f3ff"
                }
              }
            ]
          }
        },
        visualMap: {
          show: true,
          left: "right",
          top: "bottom",
          min: 0,
          calculable: true,
          inRange: {
            color: ["#24f5d8", "#e7b106", "#f55f24", "#FF753F", "#A8380C"]
          }
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "bmap",
            data: _self.hotData,
            pointSize: 10,
            blurSize: 2,
            //颜色透明度，
            minOpacity: 0.4,
            maxOpacity: 0.7
          }
        ]
      });
      var bmap = _self.hotChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      var navigationControl = new window.BMap.NavigationControl({
        // 靠左上角位置
        anchor: window.BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: window.BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      bmap.addControl(navigationControl);
      bmap.addControl(new window.BMap.MapTypeControl());
    }
  },
  created() {},
  mounted() {
    this.draw();
    // this.myChart = this.$echarts.init(document.getElementById("myChart"));
    // this.drawLine(this.myChartData);
    // this.trendChart = this.$echarts.init(document.getElementById("trendChart"));
		// this.drawTrend();
		// this.getHotData();  热力图
  }
};
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="stylus" scoped>
.manyCustomers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.myChart{
  width: 100%;
  min-height: 2rem;
  position: relative;
}

.myCharts {
	padding-top: .5rem;
  width: 100%;
  height: 6rem;
}
.noData{
  position: absolute;
  top: 0;
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  font-size: .28rem;
}

.trendChart {
	padding-top: .5rem;
  width: 100%;
  height: 6rem;
}
.hotChart{
	padding-top: .5rem;
	width: 90%;
	margin: 0 auto;
  height: 6rem;
}
.trend{
  width: 100%;
  padding-bottom: 1.5rem;
}
.trend .select{
  margin-left: 10%;
  display: inline-block;
  width: 50%;
}
.trend .whole{
  margin-left: 5%;
  display: inline-block;
  width: 30%;
}
.trend .whole>span{
  display: block;
  width: 30%;
  height: 40px;
  line-height: 40px;
}
.active{
  color: #e74c68;
}
</style>


